<template>
  <div class="project-progress">
    <div
      v-for="(item, index) in list"
      :key="index"
      :class="['progress-item', { active: activeIdx == index }]"
    >
      <div class="progress-item_date">
        <div class="start-time">
          <span>{{ item.periodStartTime }}</span>
        </div>
        <span v-if="index === list.length - 1" class="end-time">
          {{ item.periodStartTime }}
        </span>
      </div>
      <div
        class="progress-item_piece"
        :style="renderBgColor(item.status, index)"
      >
        {{ item.periodName }}
      </div>
    </div>
    <div class="progress-txt">进度：{{ percentage | filterPercent }}</div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    percentage: { String, Number },
  },
  filters: {
    filterPercent(val) {
      return val + "%";
    },
  },
  computed: {
    activeIdx() {
      let activeIdx = this.list.findIndex((item) => item.status == 0);
      if (activeIdx !== -1) return activeIdx;
    },
  },
  methods: {
    renderBgColor(status, idx) {
      if (this.activeIdx === idx) {
        return {
          background: "#3b95ff",
          color: "#fff",
        };
      } else if (status === 1) {
        return {
          background: "#45b177",
          color: "#fff",
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.project-progress {
  width: 100%;
  display: flex;
  align-items: flex-end;
  .progress-item {
    flex: 1;
    font-size: 14px;
    position: relative;
    & + .progress-item {
      margin-left: 2px;
      .progress-item_date .start-time span {
        position: relative;
        left: -50%;
        line-height: 18px;
      }
    }
    .progress-item_date {
      margin-bottom: 5px;
      color: #666;
      .start-time {
        display: inline-block;
      }
      .end-time {
        position: absolute;
        right: 0;
      }
    }
    .progress-item_piece {
      line-height: 32px;
      padding: 0 10px;
      text-align: center;
      background: #e2eefe;
      color: #666;
    }
  }
  .active::after {
    content: "";
    position: absolute;
    bottom: -8px;
    right: -7px;
    border: 5px solid transparent;
    border-right: 7px solid #ef7045;
    transform: rotate(90deg);
  }
  .progress-txt {
    width: 5em;
    line-height: 32px;
    font-size: 14px;
    margin-left: 20px;
    color: #45b177;
  }
}
</style>
